<!--
 * @description: 搜索栏二开组件
 * @Author: Islands
 * @Date: 2024-03-26 23:37:44
 * @LastEditTime: 2024-03-27 02:28:32
-->
<script lang="ts" setup>
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance } from "element-plus";
import { Search, Refresh } from "@element-plus/icons-vue";
import { ISearchItem } from "@/types/index.d";
const props = defineProps({
  /**
   * 搜索表单对象
   */
  searchData: {
    type: Object,
    required: true,
  },
  /**
   * 搜索表单常量集合
   */
  items: {
    type: Array<ISearchItem>,
    required: true,
  },
});
/**
 * 回调方法
 */
const emit = defineEmits<{
  /**
   * 查询
   * @param data 表单数据
   */
  (e: "searchChange", data: any): void;
}>();

//dom操作id
const formRef = ref<FormInstance>();
//查询按钮是否禁用
const disabled = ref<boolean>(true);
//重置按钮动画开关
const resetLoading = ref<boolean>(false);
//查询按钮动画开关
const queryLoading = ref<boolean>(false);

/**
 * 查询方法
 * @param _formRef
 * @param data
 */
const searchSubmit = (_formRef: FormInstance | undefined, data: object) => {
  if (!_formRef) return;
  queryLoading.value = true;
  try {
    emit("searchChange", data);
  } catch (error) {
    ElMessage.error("查询失败!");
  } finally {
    queryLoading.value = false;
  }
};

/**
 * 重置方法
 * @param _formRef
 * @param data
 * @callback resetCallback(data,close)
 */
const resetSubmit = (_formRef: FormInstance | undefined, data: object) => {
  if (!_formRef) return;
  resetLoading.value = true;
  _formRef.resetFields();
  try {
    searchSubmit(_formRef, data);
  } catch (error) {
    ElMessage.error("刷新失败!");
  } finally {
    resetLoading.value = false;
    disabled.value = false;
  }
};

/**
 * 监听搜索框表单变化
 */
watch(
  () => ({ ...props.searchData }),
  (newForm, oldForm) => {
    if (!Object.is(newForm, oldForm)) {
      disabled.value = false;
    }
  }
);
</script>
<template>
  <div class="search">
    <el-form ref="formRef" :inline="true" :model="searchData">
      <template v-for="item in items" :key="item.id">
        <!-- input -->
        <el-form-item
          v-if="item.type === 'input'"
          :prop="item.prop"
          :label="$t(item.label)"
        >
          <el-input
            v-model="searchData[item.prop]"
            :placeholder="$t(item.label, { prefix: $t(`prefix.placeholder`) })"
            clearable
            :style="{ width: item.width?item.width+'px':'180px' }"
          />
        </el-form-item>

        <!-- select -->
        <el-form-item
          v-if="item.type === 'select'"
          :prop="item.prop"
          :label="$t(item.label)"
        >
          <el-select-v2
            v-model="searchData[item.prop]"
            :options="item.select.options ? item.select.options : []"
            :multiple="item.select.multiple"
            :placeholder="$t(item.label, { prefix: $t(`prefix.select`) })"
            :style="{ width: item.width?item.width+'px':'160px' }"
          />
        </el-form-item>
      </template>
      <!-- 操作按钮 -->
      <el-form-item>
        <el-button
          type="primary"
          :icon="Search"
          :disabled="disabled"
          :loading="queryLoading"
          @click="searchSubmit(formRef, searchData)"
        >
          {{ $t(`button.search`) }}
        </el-button>
        <el-button
          :icon="Refresh"
          :loading="resetLoading"
          @click="resetSubmit(formRef, searchData)"
        >
          {{ $t(`button.reset`) }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped></style>
